<template>
  <div>
    <a-row class="j-select-row" type="flex" :gutter="8">
      <a-col class="left" :class="{ full: !showButton }">
        <!-- 显示加载效果 -->
        <a-input v-if="loading" readOnly placeholder="加载中…">
          <template #prefix>
            <LoadingOutlined />
          </template>
        </a-input>

        <a-select
          v-else
          ref="select"
          v-model:value="selectValues.value"
          :placeholder="placeholder"
          :mode="multiple"
          :open="false"
          :disabled="disabled"
          :options="options"
          :maxTagCount="maxTagCount"
          @change="handleChange"
          style="width: 100%"
          @click="!disabled && openModal(false)"
          v-bind="attrs"
        />
      </a-col>
      <a-col v-if="showButton" class="right">
        <a-button v-if="buttonIcon" :preIcon="buttonIcon" type="primary" @click="openModal(true)" :disabled="disabled">选择</a-button>
        <a-button v-else type="primary" @click="openModal(true)" :disabled="disabled">选择</a-button>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, inject, reactive } from "vue"
  import { propTypes } from "/@/utils/propTypes"
  import { useAttrs } from "/@/hooks/core/useAttrs"
  import { LoadingOutlined } from "@ant-design/icons-vue"

  export default defineComponent({
    name: "JSelectBiz",
    components: { LoadingOutlined },
    inheritAttrs: false,
    props: {
      showButton: propTypes.bool.def(true),
      disabled: propTypes.bool.def(false),
      placeholder: {
        type: String,
        default: "请选择",
      },
      // 是否支持多选，默认 true
      multiple: {
        type: String,
        default: "multiple",
      },
      // 是否正在加载
      loading: propTypes.bool.def(false),
      // 最多显示多少个 tag
      maxTagCount: propTypes.number,
      // buttonIcon
      buttonIcon: propTypes.string.def(""),
    },
    emits: ["handleOpen", "change"],
    setup(props, { emit, refs }) {
      //接收下拉框选项
      const options = inject("selectOptions") || ref([])
      //接收选择的值
      const selectValues = inject("selectValues") || ref<any>({})
      const attrs = useAttrs()

      /**
       * 打开弹出框
       */
      function openModal(isButton) {
        if (props.showButton && isButton) {
          emit("handleOpen")
        }
        if (!props.showButton && !isButton) {
          emit("handleOpen")
        }
      }

      /**
       * 下拉框值改变事件
       */
      function handleChange(value) {
        selectValues.value = value
        selectValues.change = true
        emit("change", value)
      }

      return {
        attrs,
        selectValues,
        options,
        handleChange,
        openModal,
      }
    },
  })
</script>
<style lang="less" scoped>
  .j-select-row {
    @width: 82px;

    .left {
      width: calc(100% - @width - 8px);
    }

    .right {
      width: @width;
    }

    .full {
      width: 100%;
    }

    :deep(.ant-select-search__field) {
      display: none !important;
    }
  }
</style>
